<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听器</title>

</head>
<body>


<div id="app">


    <div>
        question: <input type="text" v-model="question">
    </div>

    <div>
        {{ answer }}
    </div>

</div>
</body>
<script src="../../../demo/lib/vue.global.js"></script>
<script>

    var app = Vue.createApp({
        data: function () {

            return {
                question: '',
                answer: ''
            }
        }, methods: {
            getAnswer: function (question) {

                /**
                 * reponse 代表一个来自服务器端的回应
                 * */
                var response = 'the answer is : + the answer for ' + question;

                this.answer = response;
            },
            getAnswer2:function (question,callback){

                setTimeout(function (){
                    var response = 'the answer is : + the answer for ' + question;

                    callback(response);
                },2000)
            }
        }, watch: {
            question: function (question) {
                // console.log(newVal);
                // console.log(oldVal);

                /**
                 * 版本1
                 * */
               // this.getAnswer(question);


                 /**
                  * 版本2
                  * */
                var _this = this;

                /**
                 *  把question 交给远程程序
                 *  直到 返回 res，才真正地执行匿名函数的逻辑
                 *
                 *  answer和 waiting出现的顺序
                 *  解释同步和异步的区别
                 *
                 *  同步---顺序执行
                 *  异步---跳步执行
                 *     step1 --异步---1）先开始 3）结束step1
                 *     step2            ---2） 执行step2
                 * */
                this.getAnswer2(question,function (res){
                    _this.answer = res;
                })

                this.answer = 'waiting....';

            }
        }
    });

    app.mount('#app');

</script>

</html>